<template>
  <div class="home">
    <el-button @click="handleChange">切换显示</el-button>
    <div v-for="(item, index) in arr" :key="item.id">
      <iframe :src="item.src" frameborder="0" style="width: 100%;height: 500px;" v-show="showIndex === index" :id="item.name"></iframe>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      arr: [
        {
          id: 1,
          name:'reactnative',
          src: 'https://reactnative.cn/docs/using-a-listview'
        },
        {
          id: 2,
          name:'regexp',
          src: 'https://www.runoob.com/regexp/regexp-syntax.html'
        },
        {
          id: 3,
          name:"about",
          src: 'http://localhost:8081/about'
        }],
      showIndex: 0
    }
  },
  methods: {
    handleChange() {
      this.showIndex = (this.showIndex + 1) % 3
      
      if (this.showIndex == 2) {
        // 发送消息
        const targetWindow = document.getElementById('about').contentWindow;
        targetWindow.postMessage('来自HomeView的消息', 'http://localhost:8081/about')
      }

    }
  }
}
</script>